<template>
  <div class="flex flex-col">
    <!-- 头部组件上面的区域，包括左侧面包屑、右侧的其他功能组件 -->
    <div class="flex justify-between items-center h-15">
      <!-- 头部组件上面的左侧组件, 面包屑 -->
      <div class="flex items-center ml-5 space-x-5">
        <collapse></collapse>
        <refresh></refresh>
        <bread-crumb></bread-crumb>
      </div>
      <!-- 头部组件上面的右侧组件, 其他功能组件 -->
      <div class="flex items-center mr-5 space-x-5">
        <search></search>
        <theme></theme>
        <fullscreen></fullscreen>
        <message-box></message-box>
        <language></language>
        <setting></setting>
        <user-avatar></user-avatar>
      </div>
    </div>

    <!-- 头部组件下面的 tag-view 标签栏 -->
    <div class="header-bottom">
      <tag-view></tag-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import Collapse from "@/layouts/header/tool-bar/collapse.vue";
import Refresh from "@/layouts/header/tool-bar/refresh.vue";
import BreadCrumb from "@/layouts/header/tool-bar/bread-crumb.vue";

import Search from "@/layouts/header/tool-bar/search.vue";
import Theme from "@/layouts/header/tool-bar/theme.vue";
import Fullscreen from "@/layouts/header/tool-bar/fullscreen.vue";
import MessageBox from "@/layouts/header/tool-bar/message-box.vue";
import Language from "@/layouts/header/tool-bar/language.vue";
import Setting from "@/layouts/header/tool-bar/setting.vue";
import UserAvatar from "@/layouts/header/tool-bar/user-avatar.vue";

import TagView from "@/layouts/header/tag-view/tag-view.vue";
</script>

<style scoped lang="scss">
.toolbar > * {
  margin-right: 20px;
}
</style>